<!-- 充值管理 -->
<template>
  <div style="padding-left:20px;">
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-select v-model="data.status" size="medium" class="iup_width200" placeholder="请选择状态">
          <el-option v-for="item in statusList" :key="item.code" :label="item.name" :value="item.code"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-input v-model="data.userName" size="medium" class="iup_width200" placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="data.mobile" size="medium" class="iup_width200" placeholder="请输入手机号"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="data.sn" size="medium" class="iup_width200" placeholder="请输入交易编号"></el-input>
      </el-form-item>
      <el-form-item>
        <el-date-picker v-model="data.startTime" value-format="yyyy-MM-dd" type="date" size="medium" :clearable="false" :editable="false"
          placeholder="选择开始日期" class="iup_width200"></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-date-picker v-model="data.endTime" value-format="yyyy-MM-dd" type="date" size="medium" :clearable="false" :editable="false"
          placeholder="选择结束日期" class="iup_width200"></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="medium" @click="search">查询</el-button>
        <el-button type="info" size="medium" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="getList" v-loading="loading" element-loading-text="数据加载中" empty-text border stripe>
      <div slot="empty">
        <div v-if="loading"></div>
        <div v-else>暂无数据</div>
      </div>
      <el-table-column type="index" label="序号" align="center" width="70"></el-table-column>
      <el-table-column prop="userName" label="用户名" align="center" width="150"></el-table-column>
      <el-table-column prop="mobile" label="手机号" align="center" width="150"></el-table-column>
      <el-table-column prop="sn" label="交易编号" align="center" width="220"></el-table-column>
      <el-table-column prop="hashStr" label="哈希值" align="center" width="200"></el-table-column>
      <el-table-column prop="type" label="充值方式" align="center" width="120">
        <template slot-scope="scope">
          <span>{{scope.row.type==1?'USDT': ''}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="amt" label="充值金额" align="center" width="120">
        <template slot-scope="scope">
          <span class="green">{{common.formatAmount(scope.row.amt,2)}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" align="center" width="120">
        <template slot-scope="scope">
          <span
            :class="{blue:scope.row.status=='0',green:scope.row.status=='1',red:scope.row.status=='2'}">{{scope.row.status==0?'待审批': scope.row.status==1?'成功':'失败'}}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="balanceAmt" label="充值后余额" align="center" width="120">
        <template slot-scope="scope">
          <span class="green">{{common.formatAmount(scope.row.balanceAmt)}}</span>
        </template>
      </el-table-column> -->
      <el-table-column prop="addTime" label="充值时间" :formatter="common.formatTime" align="center" width="170"></el-table-column>
      <el-table-column label="操作" min-width="150" fixed="right" align="center">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="examine(scope.row)" v-show="scope.row.status =='0'">审核</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页开始 -->
    <pagination :total="total" :pageData="data" @hanleSize="changePage" @hanlePage="handleSizeChange"></pagination>
    <!-- 充值审核 -->
    <RechargelistModal v-if="recharData.showModal" :recharData="recharData" @close="getRoleList" />
  </div>
</template>
<script>
import RechargelistModal from "component/permissions/RechargeListModal";
export default {
  components: {
    RechargelistModal
  },
  data () {
    return {
      getList: [],
      data: {
        pageSize: 10,
        currentPage: 1,
        status: "", // 状态
        userName: "", // 用户名
        mobile: "", // 手机号
        startTime: "", //开始时间
        endTime: "", //结束时间
        sn: "" //交易编号
      },
      total: 0,
      loading: false,
      getTime: "",
      statusList: [],
      recharData: {}
    };
  },
  methods: {
    // 操作
    examine (row) {
      this.recharData = {
        showModal: true,
        title: "充值管理",
        recharID: row.id
      };
    },
    //获取字典表
    async getterm () {
      this.statusList = await this.common.enumsList("RECHARGE_STATUS");
      this.data.status = '0';
      this.getRoleList();
    },
    //点击页数触发
    changePage (page) {
      this.data.currentPage = page;
      this.getRoleList();
    },
    //选择页数最多显示几条数据
    handleSizeChange (val) {
      this.data.pageSize = val;
      this.getRoleList();
    },
    //查询
    changeInput () {
      this.data.currentPage = 1;
      this.getTime();
    },
    //查询关键字
    search () {
      if (this.data.endTime < this.data.startTime && !this.data.endTime == "") {
        this.$message({ type: "error", message: "开始时间不能大于结束时间" });
        return;
      }
      if (this.data.startTime == "" && this.data.endTime) {
        this.$message({ type: "error", message: "开始时间不能为空" });
        return;
      } else if (this.data.endTime == "" && this.data.startTime) {
        this.$message({ type: "error", message: "结束时间不能为空" });
        return;
      }
      this.data.currentPage = 1;
      this.getRoleList();
    },
    //重置列表
    reset () {
      Object.assign(this.$data.data, this.$options.data().data); //重置列表
      this.getRoleList();
    },
    //获取列表
    async getRoleList () {
      this.loading = true;
      let url = "/recharge/queryPage";
      let result = await this.request.httpRequest("POST", url, this.data);
      if (result.code == 200) {
        this.total = result.data.totalRows;
        this.data.pageSize = result.data.pageSize;
        this.data.currentPage = result.data.currentPage;
        this.getList = result.data.datas;
      } else {
        this.$message({ type: "error", message: result.msg });
      }
      this.loading = false;
    }
  },
  mounted () {
    this.getterm();
    this.getTime = this.helper.debounce(this.getRoleList); //防抖
  },
  created () {
    document.onkeydown = e => {
      if (e.keyCode == 13) {
        this.search();
      }
    };
  }
};
</script>
<style scoped>
.el-form {
  padding: 15px 0px !important;
}
.el-form-item {
  margin-bottom: 0px !important;
}
</style>